<template>
  <page-meta :root-font-size="fontsize" class="store-detail">
    <canvas
      id="my-canvas"
      width="500"
      height="400"
      canvas-id="my-canvas"
    ></canvas>

    <xlNavBar
      title="店铺详情"
      bgc="ff9d49"
      :isShare="isShare"
      :showLeft="true"
    ></xlNavBar>
    <template v-if="storeDetail">
      <swiper
        v-if="storeDetail.store_image.length > 0"
        class="st-swiper"
        circular
        autoplay
        :interval="2000"
        :duration="500"
      >
        <swiper-item v-for="img in storeDetail.store_image" :key="img">
          <image class="image" :src="img" mode="aspectFill" />
        </swiper-item>
      </swiper>
      <img
        v-else
        class="st-image"
        mode="widthFix"
        src="https://canyinxinxi.cn/system_work/image-null.png"
      />
      <view class="st-info">
        <view class="i-card">
          <view class="name">
            {{ storeDetail.monthly_rent }}
            <span class="unit">元/月</span>
          </view>
          <view class="text">
            {{
              (storeDetail.monthly_rent / storeDetail.store_area / 30).toFixed(
                1
              )
            }}元/m²/天
          </view>
        </view>
        <view class="i-card">
          <view class="name">
            {{ storeDetail.store_area }} <span class="unit">m²</span>
          </view>
          <view class="text">面积</view>
        </view>
        <view class="i-card">
          <view class="name">
            {{
              storeDetail.is_transfer_fee !== 1
                ? "无转让费"
                : storeDetail.is_show_transfer_fee === 1
                ? (storeDetail.transfer_fee / 10000).toFixed(2) + "万元"
                : "面议"
            }}
          </view>
          <view class="text">转让费</view>
        </view>
      </view>
      <view class="st-explain">
        <view class="title"> 店铺亮点 </view>
        <view class="text">
          {{ storeDetail.store_highlight }}
        </view>
        <img
          class="icon"
          v-if="storeDetail.is_top && storeDetail.status === 1"
          src="./image/top-icon.png"
          mode="widthFix"
        />
      </view>

      <view class="st-safe">
        <view class="s-header">
          <view class="name">
            <img class="icon" src="./image/safe-tip.png" mode="widthFix" />
            餐饮信息网安全提示
          </view>
          <view class="btn" @click="handleShowReportPopup" v-if="!isShare">
            举报
          </view>
        </view>
        <view class="s-info">
          该信息由用户发布，请注意保护个人权益，其真实性、合法性由信息提供者负责，如遇办证收费、刷单、传销、诱导买车等违规行为，请立即向餐饮信息网投诉举报!
        </view>
        <img
          class="s-image"
          @click="goMore"
          v-if="isShare"
          src="https://canyinxinxi.cn/system_work/more-info.png"
          mode="widthFix"
        />
      </view>

      <view class="st-footer" :class="[$isIos() == 'IOS' ? 'ios' : '']">
        <view class="f-left">
          <button v-if="isShare" class="btn" type="default" @click="goHome">
            <img class="icon" src="@/static/images/common/home.png" mode="widthFix" />
            <view class="text">首页</view>
          </button>
          <button class="btn" type="default" @click="handleCollect">
            <img
              class="icon"
              v-if="storeDetail.is_collect"
              src="@/static/images/common/issc.png"
              mode="widthFix"
            />
            <img
              class="icon"
              v-else
              src="./image/collect.png"
              mode="widthFix"
            />
            <view class="text">收藏</view>
          </button>
          <button
            class="btn"
            type="default"
            data-name="shareBtn"
            v-if="storeDetail.status === 1"
            open-type="share"
          >
            <img class="icon" src="./image/share.png" mode="widthFix" />
            <view class="text">分享</view>
          </button>
        </view>
        <view class="f-right" @click="handleContact">
          <img class="icon" src="./image/phone.png" mode="widthFix" />
          <view class="text">免费联系</view>
        </view>
      </view>
    </template>

    <ReportPopup
      v-if="showReportPopup"
      @submitReport="submitReport"
      @cancelReport="cancelReport"
    ></ReportPopup>

    <TipPopup
      :title="tipOption.title"
      :content="tipOption.content"
      :submitText="tipOption.submitText"
      @submitTip="tipOption.submit()"
      @closeTip="closeTip"
      v-if="tipPopup"
    ></TipPopup>
    <ContactBoss
      @submitCall="submitCall"
      @submitIntention="submitIntention"
      @close="closeContactBoss"
      v-if="contactBossPopup"
    ></ContactBoss>
  </page-meta>
</template>

<script>
import ReportPopup from "./components/reportPopup.vue";
import TipPopup from "./components/tipPopup.vue";
import ContactBoss from "./components/contactBoss.vue";
export default {
  name: "StoreDetail",
  data() {
    return {
      isShare: false,
      storeId: "",
      showReportPopup: false,
      tipPopup: false,
      contactBossPopup: false,
      tipOption: {
        title: "",
        content: "",
        submitText: "",
        submit: () => {}
      },
      fontsize: "",
      showContactPopup: false,
      storeDetail: null,
      userIntegralInfo: null
    };
  },
  components: { ReportPopup, TipPopup, ContactBoss },
  onLoad(options) {
    let designWidth = 37.5;
    uni.onWindowResize((res) => {
      this.fontsize =
        Math.floor((1.5 * res.size.windowWidth) / designWidth) + "px";
    });
    uni.getSystemInfo({
      success: (res) => {
        this.fontsize =
          Math.floor((1.5 * res.screenWidth) / designWidth) + "px";
      }
    });

    if (options.share) {
      this.isShare = true;
      this.$setStoraged("shareUserId", options.shareUserId);
    }
    this.storeId = options.id;
    this.getDetail(options.id);
  },
  onShareAppMessage() {
    let that = this;
    let transferFee =
      that.storeDetail.is_transfer_fee !== 1
        ? "无转让费"
        : this.storeDetail.is_show_transfer_fee === 1
        ? (this.storeDetail.transfer_fee / 10000).toFixed(2) + "万元转让费"
        : "转让费面议";
    return {
      title: `${that.storeDetail.second_area_des}店铺转租，${that.storeDetail.store_area}平米，租金${that.storeDetail.monthly_rent}元/月，${transferFee}`,
      path: `/shopPackage/storeDetail?id=${
        that.storeDetail.id
      }&share=1&shareUserId=${that.$getStoraged("user_id")}`,
      imageUrl:
        "https://chenxiao.obs.cn-north-1.myhuaweicloud.com/img/13_1680789438427854430.eterYuCrlWYubbb1b3348e59dda8aa3997977bb17a78.jpg",
      desc: "",
      content: "",
      success() {
        uni.showToast({
          title: "分享成功"
        });
      },
      fail() {
        uni.showToast({
          title: "分享失败",
          icon: "none"
        });
      }
    };
  },
  methods: {
    async getDetail(id) {
      let res = await this.$http.requestSync(
        "/storefronts/info/" + id,
        {},
        "GET"
      );
      if (res.code === 200) {
        this.storeDetail = {
          ...res.storefront,
          store_image: res.storefront.store_image
            ? res.storefront.store_image.indexOf(",") > -1
              ? res.storefront.store_image.split(",")
              : [res.storefront.store_image]
            : []
        };
      }
    },
    handleShowReportPopup() {
      this.showReportPopup = true;
    },
    cancelReport() {
      this.showReportPopup = false;
    },
    async submitReport(data) {
      let params = {
        type: 3,
        reason: data.reason,
        content_id: this.storeDetail.id,
        complained_user_id: this.storeDetail.user_id,
        des: data.des
      };
      let res = await this.$http.requestSync(
        "/report_complaints/create",
        params
      );

      this.showReportPopup = false;
      if (res.code === 200) {
        this.tipPopup = true;
        this.tipOption = {
          title: "温馨提示",
          submitText: "我知道了",
          content:
            "举报成功，在平台核实后将删除该信息，如被多人举报或情节特别恶劣，将会封停该账号。",
          submit: () => {
            this.tipPopup = false;
          }
        };
      } else {
        this.$layer.message("举报失败");
      }
    },
    closeTip() {
      this.tipPopup = false;
    },
    async submitCall() {
      this.contactBossPopup = false;
      this.tipPopup = true;
      if (this.userIntegralInfo.is_ok) {
        this.tipOption = {
          title: `与老板联系需要消耗${this.userIntegralInfo.integral}积分`,
          submitText: "联系老板",
          content: `您当前剩余${this.userIntegralInfo.user_integral}积分可用，是否立即与老板联系？`,
          submit: async () => {
            this.contactRequest(true);
          }
        };
      } else {
        this.tipOption = {
          title: "温馨提示",
          submitText: "去获取积分",
          content: "当前您的积分不足，是否前往获取积分？",
          submit: () => {
            if (this.$isIos() == "IOS") {
              this.$togo("/pages3/myIntegral");
            } else {
              this.$togo("/pages3/integralRechargePage");
            }
          }
        };
      }
    },
    async contactRequest(selfPay, top) {
      let params = {
        purpose_id: this.storeDetail.id,
        is_self_pay: selfPay,
        is_top: top || false
      };
      let res = await this.$http.requestSync(
        "/storefronts/contact",
        params,
        "POST"
      );
      if (res.code === 200) {
				if (
					this.$getStoraged("systemInfo").platform == "android" ||
					this.$getStoraged("systemInfo").platform == "ios" ||
					this.$getStoraged("systemInfo").platform == "devtools"
				) {
					uni.makePhoneCall({
						phoneNumber: res.phone,
					});
				} else {
					uni.showModal({
						title: "查看手机号",
						content: res.phone
					});
				}
      } else {
        uni.showToast({
          title: res.message,
          icon: "none",
          duration: 2000
        });
      }
      this.contactBossPopup = false;
      this.tipPopup = false;
    },
    async submitIntention() {
      let params = {
        purpose_id: this.storeDetail.id
      };
      let res = await this.$http.requestSync(
        "/storefronts/intention",
        params,
        "POST"
      );
      if (res.code === 200) {
        this.$layer.message("提交成功");
      } else {
        this.$layer.message(res.message);
      }
      this.contactBossPopup = false;
    },
    closeContactBoss() {
      this.contactBossPopup = false;
    },
    goMore() {
      this.$togo("/shopPackage/rentStore");
    },
    goHome() {
      uni.redirectTo({
        url: "/pages/index"
      });
    },
    async handleCollect() {
      this.$throttle(() => {
        this.$checkLogin(async () => {
          let params = {
            type: 3,
            status: !this.storeDetail.is_collect ? 1 : 2,
            content_id: this.storeDetail.id
          };
          let res = await this.$http.requestSync("/collects/set", params);
          if (res.code === 200) {
            this.$layer.message(res.message);
            this.storeDetail.is_collect = !this.storeDetail.is_collect;
          } else {
            uni.showToast({
              title: res.message,
              icon: "none",
              duration: 2000
            });
          }
        });
      });
    },
    async handleContact() {
      this.$throttle(async () => {
        this.$checkLogin(async () => {
          let params = { purpose_id: this.storeDetail.id };
          let res = await this.$http.requestSync(
            "/storefronts/is_contact",
            params,
            "POST"
          );
          if (res.is_contact || res.is_top) {
            this.contactRequest(false, true);
            return;
          }
          if (!res.is_self_pay) {
            this.contactRequest(false);
          } else {
            this.userIntegralInfo = res;
            this.contactBossPopup = true;
          }
        });
      });
    }
  }
};
</script>

<style scoped lang="scss">
.store-detail {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: #fff;
  display: block;
  #my-canvas {
    position: absolute;
  }
  .st-swiper {
    width: 100%;
    height: 218px;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 3%,
      rgba(0, 0, 0, 0.3) 100%
    );
    .image {
      width: 100%;
      height: 100%;
    }
  }
  .st-image {
    width: 100%;
    height: 100%;
  }
  .st-info {
    display: flex;
    justify-content: space-around;
    margin: 15px 0;
    .i-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      .name {
        font-weight: 600;
        color: #2c9cfd;
        font-size: 18px;
        .unit {
          font-size: 12px;
        }
      }
      .text {
        margin-top: 5px;
        font-size: 10px;
        color: #999999;
      }
    }
  }
  .st-explain {
    width: 100%;
    padding: 10px 20px;
    margin-top: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: #f7fafd;
    color: #3f6a90;
    position: relative;
    .title {
      font-size: 16px;
      font-weight: 600;
    }
    .text {
      margin-top: 12px;
      font-size: 14px;
      line-height: 20px;
    }
    .icon {
      position: absolute;
      z-index: 1;
      top: 0px;
      right: 0px;
      width: 36px;
      height: 36px;
    }
  }
  .st-safe {
    width: 100%;
    padding: 0 10px;
    margin-top: 18px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .s-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .name {
        display: flex;
        align-items: center;
        font-weight: 600;
        font-size: 14px;
        color: #333333;
        .icon {
          margin-right: 4px;
          width: 20px;
          height: 20px;
        }
      }
      .btn {
        width: 44px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border-radius: 14px 14px 14px 14px;
        background: rgba(253, 136, 34, 0);
        border: 1px solid #fd8822;
        color: #ff8822;
        font-size: 12px;
      }
    }
    .s-info {
      margin-top: 10px;
      font-size: 13px;
      color: #999999;
      line-height: 18px;
    }
    .s-image {
      margin-top: 15px;
      margin-bottom: 100px;
      width: 100%;
      height: 92px;
    }
  }

  .st-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    background: #ffffff;
    .f-left {
      display: flex;
      .btn {
        display: flex;
        flex-direction: column;
        margin-left: 15px;
        padding: 0;
        .icon {
          width: 26px;
          height: 26px;
        }
        .text {
          line-height: 12px;
          font-size: 12px;
          color: #666666;
        }
      }
    }
    .f-right {
      width: 138px;
      height: 42px;
      margin-right: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #2c9cfd;
      border-radius: 22px;
      .icon {
        width: 22px;
        height: 22px;
      }
      .text {
        margin-left: 6px;
        font-size: 16px;
        font-weight: 600;
        color: #ffffff;
      }
    }
  }
}
</style>
